<template>
  <div class="approve-all-list">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>全部审批</h3>
        </div>
      </template>

      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待审批" name="1"></el-tab-pane>
        <el-tab-pane label="审批通过" name="2"></el-tab-pane>
        <el-tab-pane label="审批拒绝" name="3"></el-tab-pane>
      </el-tabs>

      <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="员工">
          <el-input
            v-model="searchForm.uname"
            placeholder="请选择员工"
            readonly
            @click="selectUser"
            style="width: 200px"
          />
          <input type="hidden" v-model="searchForm.uid" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchApprovals">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="resetSearch">清空</el-button>
        </el-form-item>
      </el-form>

      <Table
        :data="approvalList"
        border
        v-loading="loading"
        :height="tableHeight"
        :columns="tableColumns"
        :show-operation="true"
        operation-width="60"
      >
        <template #check_status="{ row }">
          <span :class="`check-status-color-${row.check_status}`">
            『{{ row.check_status_str }}』
          </span>
        </template>

        <template #operation="{ row }">
          <el-button size="small" type="primary" @click="viewDetail(row)">详情</el-button>
        </template>
      </Table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 用户选择对话框 -->
    <el-dialog v-model="userDialogVisible" title="选择员工" width="600px">
      <el-table
        :data="userList"
        highlight-current-row
        @current-change="handleUserSelect"
        v-loading="userLoading"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="department" label="部门" />
      </el-table>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="userDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmUserSelect">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import axios from '../../utils/request'
  import { Search } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  import { BaseTable } from '../../components'

  const Table = BaseTable

  // 数据相关
  const approvalList = ref([])
  const loading = ref(false)
  const activeTab = ref('0')
  const currentPage = ref(1)
  const pageSize = ref(20)
  const total = ref(0)
  const tableHeight = ref('full-152')

  // 搜索表单
  const searchForm = reactive({
    uname: '',
    uid: 0,
    status: '0',
  })

  // 用户选择相关
  const userDialogVisible = ref(false)
  const userList = ref<any[]>([])
  const userLoading = ref(false)
  const selectedUser = ref<any>(null)

  const router = useRouter()

  // 表格列配置
  const tableColumns = [
    { prop: 'types_name', label: '审批类型', width: 100, align: 'center' as const },
    {
      prop: 'check_status',
      label: '审核状态',
      width: 110,
      align: 'center' as const,
      slot: 'check_status',
    },
    { prop: 'admin_name', label: '申请人', width: 90, align: 'center' as const },
    { prop: 'create_time', label: '申请时间', width: 150, align: 'center' as const },
    { prop: 'department', label: '所属部门', width: 120, align: 'center' as const },
    { prop: 'check_users', label: '当前审批人' },
    { prop: 'check_copy_users', label: '抄送人员', width: 150 },
  ]

  // 获取全部审批列表
  const getAllApprovalList = async () => {
    try {
      loading.value = true
      const response = await axios.get('/home/approve/all', {
        params: {
          status: activeTab.value,
          uid: searchForm.uid,
          page: currentPage.value,
          limit: pageSize.value,
        },
      })

      if (response.data?.code === 0) {
        approvalList.value = response.data?.data?.list
        total.value = response.data?.data?.total
      } else {
        ElMessage.error(response.data?.msg || '获取审批列表失败')
      }
    } catch (error) {
      ElMessage.error('获取审批列表失败')
    } finally {
      loading.value = false
    }
  }

  // 查看详情
  const viewDetail = (row: any) => {
    router.push(row.view_url + '?id=' + row.id)
  }

  // 处理标签页切换
  const handleTabChange = (name: string) => {
    searchForm.status = name
    activeTab.value = name
    currentPage.value = 1
    getAllApprovalList()
  }

  // 处理分页大小变化
  const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    getAllApprovalList()
  }

  // 处理当前页变化
  const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getAllApprovalList()
  }

  // 搜索审批
  const searchApprovals = () => {
    currentPage.value = 1
    getAllApprovalList()
  }

  // 重置搜索
  const resetSearch = () => {
    searchForm.uname = ''
    searchForm.uid = 0
    currentPage.value = 1
    getAllApprovalList()
  }

  // 选择用户
  const selectUser = async () => {
    try {
      userLoading.value = true
      // 这里应该调用实际的用户列表接口
      const response = await axios.get('/user/list')

      if (response.data?.code === 0) {
        userList.value = response.data?.data
      } else {
        ElMessage.error(response.data?.msg || '获取用户列表失败')
      }
    } catch (error) {
      // 模拟数据
      userList.value = [
        { id: 1, name: '张三', department: '销售部' },
        { id: 2, name: '李四', department: '财务部' },
        { id: 3, name: '王五', department: '人事部' },
        { id: 4, name: '赵六', department: '技术部' },
      ] as any[]
    } finally {
      userLoading.value = false
      userDialogVisible.value = true
    }
  }

  // 处理用户选择
  const handleUserSelect = (row: any) => {
    selectedUser.value = row
  }

  // 确认用户选择
  const confirmUserSelect = () => {
    if (selectedUser.value) {
      searchForm.uname = selectedUser.value.name
      searchForm.uid = selectedUser.value.id
      userDialogVisible.value = false
    } else {
      ElMessage.warning('请选择一个用户')
    }
  }

  // 初始化
  onMounted(() => {
    getAllApprovalList()
  })
</script>

<style scoped>
  .approve-all-list {
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .search-form {
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
  }

  .check-status-color-0::before,
  .check-status-color-4::before {
    content: '待审批';
    color: #409eff;
  }

  .check-status-color-1::before {
    content: '审批通过';
    color: #67c23a;
  }

  .check-status-color-2::before {
    content: '审批拒绝';
    color: #f56c6c;
  }

  .check-status-color-3::before {
    content: '已撤回';
    color: #909399;
  }
</style>
